<template>
    <div class="wh100">
        <div class="cell-title">
            <div class="inb-midden cell-img">
                <img v-if="title === '总用水' || title === '单车用水'" src="../../assets/image/icon_all_water.png" class="cell-img">
                <img v-else-if="title === '总蒸汽' || title === '单车蒸汽'" src="../../assets/image/icon_all_steam.png" class="cell-img">
                <img v-else-if="title === '总冷量' || title === '单车冷量'" src="../../assets/image/icon_all_cold.png" class="cell-img">
                <img v-else-if="title === '总用电' || title === '单车用电'" src="../../assets/image/icon_all_electric.png" class="cell-img">
                <img v-else-if="title === '总碳排' || title === '单车碳排'" src="../../assets/image/icon_all_carbon.png" class="cell-img">
                <img v-else-if="title === '总燃气' || title === '单车燃气'" src="../../assets/image/icon_all_gas.png" class="cell-img">
                <img v-else-if="title === '总空气' || title === '单车空气'" src="../../assets/image/icon_all_air.png" class="cell-img">
              <img v-else-if="title === '总成本' || title === '单车成本'" src="../../assets/image/icon_money.png" class="cell-img">
                <img v-else src="../../assets/image/icon_fire.png" class="cell-img">
                <!--<Icon v-if="title === '总用水" type="all_water" class="m-iconfont"/>-->
                <!--<Icon v-if="title === '总蒸汽'" type="all_steam" class="m-iconfont"/>-->
            </div>
            <span class="font-m">{{ title }}</span>
        </div>
        <div>
            <p class="txt-center font-xl">{{ count }}<span class="mar-left-l font-m">{{ unit }}</span></p>
        </div>
        <div class="flexCenterStart">
            <div class="progress-line-wrap inb-start mar-left-l">
<!--                :class="type === 'normal' ? 'progress-normal' : 'progress-warming'" :style="'width: ' + percent + '%;'"-->
                <div class="progress-line hei100" :class="[percent > 0 ? 'progress-normal' : 'progress-warming']" :style="[percent>0?{width: percent + '%'}:(percent<-100?{width: '100%'}:{width: Math.abs(percent) + '%'})]"></div>
              <!--:style="'width: ' + percent + '%;'"-->
            </div>
            <span class="font-m2 mar-left-m"><span>{{percent}}</span>%</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'overviewCell',
        directives: {},
        components: {},
        mixins: [],
        data () {
            return {
            }
        },
        props: {
            type: {
                type: String,
                required: false
            },
            progress: {
                type: [String, Number],
                required: false,
                default: 0
            },
            title: {
                type: String,
                required: false
            },
            count: {
                type: [String, Number],
                required: false,
                default: 0
            },
            unit: {
                type: [String],
                required: false
            }
        },
        computed: {
          percent: function () {
            let percent = 0
            if (typeof this.progress === 'string') {
              percent = Number(this.progress.replace('%', ''))
            } else if (typeof this.progress === 'number') {
            }
            return percent
          }
        },
        watch: {},
        methods: {},
        beforeCreate () {
        },
        created () {
        },
        destroyed () {
        },
        mounted () {
        }
    }
</script>
<style scoped>
    .cell-title {
        padding: 20px 0 5px 25px;
    }
    .cell-img {
        width: 33px;
        height: 33px;
        line-height: 33px;
        margin-right: 16px;
    }
    .progress-line-wrap {
        width: 310px;
        height: 10px;
        background-color: #0B1736;
        margin-top: 13px;
        margin-bottom: 13px;
    }
    .progress-line {

    }
    .progress-normal {
        background-color: #43CCBA;
    }
    .progress-warming {
        background-color: #F83F59;
    }
</style>
